<template>
    <div class="loan-info-box">
        <x-header slot="header"
                  style="width:100%;height:46px;background-color: #ec6758"
                  title="分享技术"
                  :left-options="{backText: '', showBack:false,preventGoBack:false}"
                  @on-click-back="goBackPage"
        ></x-header>

        <search
            @on-result-click="resultClick"
            @on-change="getResult"
            :results="results"
            v-model="value"
            class="search-input-box"
            auto-scroll-to-top
            top="46px"
            @on-focus="onFocus"
            @on-cancel="onCancel"
            @on-submit="onSubmit"
            ref="search"

        ></search>
        <div class="list_mt_20">
            <scroller lock-x height="-90"
                      @on-scroll-bottom="onScrollBottom"
                      ref="scrollerBottom" :scroll-bottom-offst="200">
                <div class="box2">
                    <div class="list_liebiao"
                         @click="golistInfo(item)"
                         v-for="item in recordList"
                    >
                        <h4 v-text="item.title"></h4>
                        <div>
                            <span>分享人：<span v-text="item.shareName"></span></span>
                            <span>时间:<span v-text="formatDateTime(item.addTime)"></span></span>
                        </div>
                        <p v-html="item.resume"></p>
                    </div>
                </div>
                <load-more :show-loading="false" :tip="loadMoreText"></load-more>
            </scroller>

        </div>

    </div>
</template>

<script>
    /**
     *   我是分享列表
     *   例如 xxx.com/index/#typePage = 1 是方案分享  2 是技术分享
     */
    import {
        XHeader,
        Search,
        Scroller,
        LoadMore,
        dateFormat
    } from 'vux';

    import SysApi from '../../api/api'

    export default {
        name: 'shareList',
        components:{
            XHeader,
            Scroller,
            Search,
            LoadMore
        },
        data() {
            return {
                loadMoreText:"正在加载",
                activePageItem: 0, // 激活当前页
                isLastStep: false, // 是否是最后一步

                results: [],
                value: '',
                pageNo:1,

                recordList: [],
                title: '',       //标题
                addTime: '',     //时间
                resume: '',      //简介
                shareName: '',   //分享人
                readCount: '',   //阅读数

                lastDateTime:0,
                onFetching:false
            };
        },
        methods: {
            onScrollBottom () {
                if (this.onFetching) {
                    // do nothing
                } else {
                    this.onFetching = true;
                    this.pageNo = this.pageNo+1;
                    let data = {
                        title: this.title,
                        type: 1,
                        pageNo: this.pageNo,
                        pageSize: ''
                    };
                    this.getListInfo(data);
                }
            },
            formatDateTime(date) {
                return dateFormat(date, 'YYYY-MM-DD HH:mm')
            },
            //初始化
            init() {
                let _this = this;
                let data = {
                    title: this.title,
                    pageNo: this.pageNo,
                    pageSize: ''
                };
                let _type = this.$route.query.type;
                _type = Number(_type);
                switch (_type){
                    case 21:data.type = 1;break;
                    case 22:data.type = 2;break;
                    default:data.type = 2;break;
                }
               this.getListInfo(data);
            },
            getListInfo(data){
                if(this.loadMoreText != "已经加载完所有数据"){
                    SysApi.sharelist(data).then(
                        res => {
                            if(res.data.recordList){
                                this.recordList = this.recordList.concat(res.data.recordList);
                                this.loadMoreText = "正在加载";
                                if(res.data.currentPage == res.data.pageCount){
                                    this.loadMoreText = "已经加载完所有数据";
                                }
                                if(res.data.currentPage == 1 && res.data.recordList.length < 20){
                                    this.loadingShow = false;
                                }else{
                                    this.loadingShow = true;
                                }
                            }else{
                                this.loadMoreText = "已经加载完所有数据";
                            }
                            this.onFetching = false;
                        }, error => {
                        }
                    )
                }
            },

            //搜索框组件功能
            setFocus() {

            },
            resultClick(item) {
                console.log("result Click",item);
                this.golistInfo({id:item.otherData});
            },
            getResult(val) {
                // 超过400 毫秒去掉后台接口;
                let _tempNowDateTime = new Date().getTime();
                if(_tempNowDateTime - this.lastDateTime >=400){
                    this.lastDateTime =  _tempNowDateTime;
                    console.log('on-change', val);
                    this.getResultByInput(val);
                }
            },
            // 获取搜索结果
            getResultByInput(val){
//                this.results
                let rs = [];
                let data = {
                    title: val,
                    pageNo: 1,
                    pageSize: 100
                };
                let _type = this.$route.query.type;
                _type = Number(_type);
                switch (_type){
                    case 21:data.type = 1;break;
                    case 22:data.type = 2;break;
                    default:data.type = 2;break;
                }
                SysApi.sharelist(data).then(
                    res => {
                        if (res.data.recordList) {
                            for (let i = 0, j = res.data.recordList.length; i < j; i++) {
                                rs.push({
                                    title: res.data.recordList[i].title,
                                    otherData: res.data.recordList[i].id,
                                })
                            }
                            this.results = rs;

                            this.loadMoreText = "正在加载";
                        } else {
                            this.results = rs;
                            this.loadMoreText = "已经加载完所有数据";
                        }
                        this.onFetching = false;
                    }, error => {}
                )
            },
            onSubmit() {
                this.$refs.search.setBlur()
                this.$vux.toast.show({
                    type: 'text',
                    position: 'top',
                    text: 'on submit'
                })

            },
            onFocus() {
                console.log('on focus')

            },
            onCancel() {
                console.log('on cancel')
            },

            //    跳转
            golistInfo(obj) {
                this.$router.push({path: '/index/shareDetail', query: {id: obj.id}})
            },

            goBackPage() {
                this.$router.back();
            },
        },
        activated: function () {
            this.recordList = [];
            this.loadMoreText="正在加载";
            this.init();
        },

    };

    function getResult(val) {
        let rs = []
        for (let i = 0; i < 20; i++) {
            rs.push({
                title: `${val} `,
                other: i
            })
        }
        return rs
    }
</script>

<style lang="less">
    @import "../../style/theme.less";
    @import "../../style/mixin.less";

    .loan-info-box {
        background-color: @color-background-default;

        .vux-header {
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            .vux-header-left {
                .left-arrow:before {
                    border: solid 1px @color-white;
                    border-width: 2px 0 0 2px;
                }
            }
        }
        .vux-search-box .vux-search_show{
            z-index: 999;
        }
        .progressState div p {
            font-size: @font-size-tiny;
        }
        .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            top: -1px;
            padding-top: 1px;
        }
        .currentStep .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            padding-top: 1px;
            border: 1px solid @color-primary;
            color: @color-primary;
            border-radius: 50%;
            background-color: @color-white;
        }
        .weui-input {
            height: 28px;
            line-height: 28px;
        }
        .weui-wepay-flow, .weui-wepay-flow-auto {
            padding: 10px 40px 30px;
            background: @color-white;
        }
        .weui-wepay-flow__li_done .weui-wepay-flow__state,
        .weui-wepay-flow__process {
            background-color: @color-primary;
        }
    }

    .vux-search-fixed {
        position: static !important;
    }

    .weui-search-bar__cancel-btn {
        color: #000000;
    }

    .list_mt_20 {
        .list_liebiao:first-child {
            margin-top: 0 !important;
        }
        .list_liebiao {
            margin-top: 1rem;
        }
    }

    .list_liebiao {
        margin-top: 1rem;
    }

    .list_liebiao {
        padding: 1rem 1rem 1rem 1rem;
        background: @color-white;
        h4 {
            font-size: @font-size-primary;
            font-weight: normal;
            padding-bottom: 0.3rem;
        }
        div span {
            display: inline-block;
            font-size: @font-size-medium;
            padding-bottom: 0.3rem;
        }

        p {
            font-size: @font-size-medium;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
    }

</style>
